﻿@model WebExtras.JQFlot.FlotChart

<div class="well ui-well">
  <h4>Creating the Flot options</h4>
  Flot graph options are created by instantiating the <strong>WebExtras.JQFlot.FlotOptions</strong> class.
  <pre><code>
  FlotOptions options = new FlotOptions
  {
    xaxis = new AxisOptions(),                  <span class="comment">// Initialise X axis</span>
    yaxis = new AxisOptions(),                  <span class="comment">// Initialise Y axis</span>
    grid = new GridOptions { borderWidth = 1 }  <span class="comment">// Initialise grid. By default no grid is shown</span>
  };
  </code></pre>
</div>

<div class="well ui-well">
  <h4>Creating the graph data</h4>
  Flot uses a 2 dimensional numeric array for data. This can be of any numeric type <strong>int, decimal, float or
  double</strong>. In order to compensate for numerals WebExtras uses the biggest of the numeral types provided by .NET - 
  <strong>double</strong>
  <pre><code>
  List&lt;double[]&gt; graphData = new List&lt;double[]&gt;();
  
  <span class="comment">// Notice that each individual array added to the 'graphData' variable has 2 columns</span>
  <span class="comment">// The first column is your X co-ordinate and the second is your Y co-ordinate</span>

  graphData.Add(new double[] { 1, 5 });                            
  graphData.Add(new double[] { 2, 10 });

  <span class="comment">// ... and so on</span>
  </code></pre>
</div>

<div class="well ui-well">
  <h4>Creating the Flot series to be plotted</h4>
  A Flot series is created by instantiating the <strong>WebExtras.JQFlot.FlotSeries</strong> class
  <pre><code>
  FlotSeries linegraph = new FlotSeries
  {
    label = "Sample Line Graph",
    data = graphData,
    lines = new LineGraph { show = true }                 <span class="comment">// This will denote that you want a Line graph</span>
  };
  </code></pre>
</div>

<div class="well ui-well">
  <h4>Creating the Flot Chart</h4>
  All the things we have done so far now get bundled into a Flot chart by instantiating the <strong>WebExtras.JQFlot.FlotChart</strong> object.
  <pre><code>
  <span class="comment">// Notice that the 'chartSeries' property is an array, giving the flexibility of rendering multiple series in the same graph</span>
  FlotChart chart = new FlotChart
  {
    chartOptions = options,
    chartSeries = new FlotSeries[] { linegraph }          
  };
  </code></pre>
</div>

<div class="well ui-well">
  <h4>Now in your HTML</h4>
  Now that all C# bindings are done, it is time to render our graph. This can be done with a little bit of Javascript.
  <pre><code>
  @@model WebExtras.JQFlot.FlotChart
  ....
    ....
    ....
  <span class="comment">// Don't forget the square brackets when adding the graph serie</span>  
  $.plot($('#line-graph'), <strong class="highlight">[</strong>@@Html.Raw(Model.chartSeries[0].ToString())<strong class="highlight">]</strong>, @@Html.Raw(Model.chartOptions.ToString()));
  </code></pre>
</div>

<div class="well ui-well">
  <h4>And finally the output...</h4>
  <div class="content">    
    <div id="line-graph" class="graph">
    </div>
  </div>
  <script type="text/javascript">
    $(document).ready(function () {
      $.plot($('#line-graph'), [@Html.Raw(Model.chartSeries[0].ToString())], @Html.Raw(Model.chartOptions.ToString()));    
    });
  </script>
</div>
